<template>
  <div class="car">
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="确认订单"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>

    <!-- 收货地址 -->
    <div class="address" @click="toaddress">
      <div class="left">
        <div class="top">
          <div class="name">{{ list.name }}</div>
          <div class="tel">{{ list.tel }}</div>
          <div class="default" v-if="list.isDefault">默认</div>
        </div>
        <div class="btoom">{{ list.address }}</div>
      </div>
      <div class="right">
        <van-icon name="arrow" />
      </div>
    </div>

    <!-- 订单信息 -->
    <div class="con">
      <div class="one">
        <p>商品合计</p>
        <h3>¥: {{ money }}</h3>
      </div>
      <div class="one">
        <p>运费</p>
        <h4>免运费</h4>
      </div>
      <div class="one">
        <p>优惠券</p>
        <h4>暂无</h4>
      </div>
    </div>

    <!-- 商品列表 -->
    <div class="goods">
      <van-swipe-cell v-for="item in datalist" :key="item.id">
        <van-card
          class="goods-card"
          :num="item.number"
          :price="item.retail_price"
          :title="item.goods_name"
          :thumb="item.list_pic_url"
        />
      </van-swipe-cell>
    </div>

    <!-- 结算 -->
    <div class="bottom">
      <div class="left">
        <p>¥ {{ money }}</p>
      </div>
      <div class="right">
        <div @click="payfor" class="btn">支付</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  deleteAction,
  detailAction,
  listAction,
  saveAction,
  getListAction,
} from "@/api/my/index";
export default {
  components: {},

  data() {
    return {
      money: "",
      datalist: [],
      addresslist: [],
      list: {},
      name: "",
    };
  },

  created() {
    if (this.$route.params.data) {
      localStorage.setItem(
        "orderlist",
        JSON.stringify(this.$route.params.data)
      );
      localStorage.setItem("money", JSON.stringify(this.$route.params.price));
    }
    this.datalist = JSON.parse(localStorage.getItem("orderlist"));
    this.money = localStorage.getItem("money");

    if (JSON.parse(localStorage.getItem("toorder"))) {
      this.list = JSON.parse(localStorage.getItem("toorder")).data1;
    } else {
      getListAction({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        res.data.forEach((el) => {
          var obj = {};
          if (el.is_default == 1) {
            obj.id = el.id;
            obj.name = el.name;
            this.name = el.name;
            obj.tel = el.mobile;
            obj.address = el.address + el.address_detail;
            obj.isDefault = el.is_default == 0 ? false : true;
            this.list = obj;
          } else {
            return;
          }
        });
      });
    }
  },

  mounted() {},

  methods: {
    // 付款
    payfor() {
      Toast({
        message: "暂未开发支付功能",
        icon: "close",
      });
    },
    toaddress() {
      localStorage.setItem("from", "order");
      this.$router.push({
        name: "address",
        params: {
          data: this.datalist,
          price: this.money,
        },
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
// 收货地址
.address {
  width: 335px;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  text-align: left;
  .left {
    .top {
      width: 220px;
      height: 40px;
      display: flex;
      justify-content: space-between;
      .name {
        float: left;
        font-size: 16px;
        line-height: 40px;
      }
      .tel {
        font-size: 16px;
        line-height: 40px;
      }
      .default {
        background-color: red;
        color: #fff;
        width: 40px;
        border-radius: 10px;
        height: 20px;
        text-align: center;
        margin-top: 10px;
      }
    }
    .btoom {
      text-align: left;
      font-size: 14px;
      color: #999;
    }
  }
  .right {
    i {
      font-size: 20px;
      line-height: 60px;
    }
  }
}

// 订单信息
.con {
  margin: 10px 0;
  .one {
    width: 335px;
    padding: 0 20px;
    background-color: #fff;
    height: 40px;
    display: flex;
    position: relative;
    justify-content: space-between;
    p {
      line-height: 40px;
    }
    h3,
    h4 {
      line-height: 40px;
    }
    h3 {
      color: red;
      font-size: 20px;
    }
  }
}

// 商品列表
.goods {
  margin-bottom: 60px;
  background-color: #fff;
  .delete-button {
    height: 104px;
  }
  .van-swipe-cell {
    margin-bottom: 2px;
    border-bottom: 1px solid #ffffff;
  }
  .van-swipe-cell__wrapper {
    position: relative;
    width: 375px;
    height: 104px;
    input {
      position: absolute;
      z-index: 999;
      left: 10px;
      top: 40px;
      width: 20px;
      height: 20px;
      display: block;
      border-radius: 10px;
      outline-color: red;
    }
    input:focus {
      color: #ed1941;
    }
    .goods-card {
      margin-top: 0;
      margin-bottom: 1px;
      padding-left: 10px;
    }
    .van-card {
      background-color: #fff;
    }
    // .van-card::after {
    //   content: "";
    //   display: block;
    //   width: 355px;
    //   height: 1px;
    //   background-color: #eee;
    // }
    .van-card__content {
      text-align: left;
      .van-card__title {
        width: 150px;
        margin-top: 18px;
      }
      .van-card__bottom {
        margin-bottom: 15px;
      }
      .van-card__num {
        margin-top: -15px;
        font-size: 14px;
        color: #333;
      }
    }
  }
}

// 底部结算
.car {
  position: relative;
  .bottom {
    height: 50px;
    width: 375px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    .left {
      width: 100px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      margin-left: 20px;
      p {
        height: 50px;
        font-size: 30px;
        line-height: 50px;
        color: red;
      }
    }
    .right {
      width: 100px;
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      .btn {
        width: 100px;
        height: 50px;
        line-height: 50px;
        background-color: red;
        color: white;
        font-size: 16px;
      }
    }
  }
}
.van-address-list {
  padding: 0;
  margin: 10px auto;
  .van-radio__ico {
    display: none;
  }
}
.van-address-item {
  border-radius: 0;
}
</style>